import 'package:flutter/material.dart';
//import 'package:fluttertoast/fluttertoast.dart';
import 'package:flutter_app/widget/AppBarTemp1.dart';
class Rank extends StatefulWidget {
  Rank({Key key, this.title}) : super(key: key);
  final String title;
  @override
  RankState createState() => new RankState();
}

class RankState extends State<Rank> with AutomaticKeepAliveClientMixin{
  var cates;
  var currentIndex;
  var item1;
  var item2;
  var item3;
  var item4;
  var item5;
  var item6;
  var item7;
  var item8;
  var item9;
  List<String> c = ["美食", '娱乐', "酒店", '家居', '服饰', '培训', '旅游', '丽人', '健康', '其他',"测试a","测试b","测试c"];
  TextEditingController textEditingController;
  List<List<String>> list;
  FocusNode focusNode=FocusNode();
  @override
  bool get wantKeepAlive => true;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    cates = ["美妆护肤", "食品保健", "母婴童装", "家居家电", "服饰鞋包" ];
    item1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
    item2 = ["11", "21", "31", "41", "51", "61", "71", "81", "91"];
    item3 = ["12", "22", "32", "42", "52", "62", "72", "82", "92"];
    item4 = ["13", "23", "33", "43", "53", "63", "73", "83", "93"];
    item5 = ["14", "24", "34", "44", "54", "64", "74", "84", "94"];
    item6 = ["15", "25", "35", "45", "55", "65", "75", "85", "95"];
    item7 = ["16", "26", "36", "46", "56", "66", "76", "86", "96"];
    item8 = ["17", "27", "37", "47", "57", "67", "77", "87", "97"];
    item9 = ["18", "28", "38", "48", "58", "68", "78", "88", "98"];
    list = new List();
    list.add(item1);
    list.add(item2);
    list.add(item3);
    list.add(item4);
    list.add(item5);
    list.add(item6);
    list.add(item7);
    list.add(item8);
    list.add(item9);
    currentIndex = 0;
    textEditingController=TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
//setState(() {
//  currentIndex=0;
//});
    return new Scaffold(
        appBar: AppBarTemp1(child:

        Container(
          margin: EdgeInsets.only(left: 10.0, top:10.0,bottom:10.0,right: 10.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                "所有商品",
                style: TextStyle(
                    fontSize: 18.0,
                    color: Color(0xff121212),
                    fontWeight: FontWeight.bold),
              ),
              Container(
                width: 103.0,
                height: 35.0,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20.0),
                    border: Border.all(color: Color(0xffededed))),
                child: Row(
                  children: <Widget>[
                    Container(
                      width: 50.0,
                      height: 40.0,
                      child: Image.asset("images/menu.png"),
                    ),
                    Container(
                      height: 30.0,
                      width: 1.0,
                      color: Color(0xffededed),
                    ),
                    Container(
                      width: 50.0,
                      height: 40.0,
                      padding: EdgeInsets.only(
                          top: 10.0, bottom: 10.0, left: 5.0, right: 5.0),
                      child: Image.asset(
                        "images/round.png",
                        width: 20.0,
                        height: 20.0,
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
        ),
      resizeToAvoidBottomPadding: true,
      backgroundColor: Color(0xffffffff),
        body:Column(
       //   physics: NeverScrollableScrollPhysics(),
          children: <Widget>[
            SizedBox(height: 20.0,),

            Container(
              margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 20.0),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      width: 120.0,
                      height: 40.0,
                      padding: EdgeInsets.only(top: 10.0, left: 10.0, bottom: 10.0),
                      decoration: BoxDecoration(
                          border: Border.all(
                            color: Color(0xffececec),
                          ),
                          borderRadius: BorderRadius.circular(18.0),
                          color: Color(0xfff2f2f2)),
                      child: Row(
                        children: <Widget>[
                          Image.asset("images/search2.png"),
                          Expanded(
                              child: TextField(
                                controller: textEditingController,
                                style: TextStyle(color: Color(0xffffffff)),
                                focusNode: focusNode,
//                                onTap: () {
//                                   FocusScope.of(context).requestFocus(focusNode);
//                                },
                                enabled: true,
                                onSubmitted: (s) {
                                  print("finish");
                                },
                                textInputAction: TextInputAction.go,
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.only(left: 10.0, top: 5.0),
                                  hintText: "搜索商品",
                                  hintStyle: TextStyle(
                                    color: Colors.grey,
                                  ),
                                  labelStyle: TextStyle(color: Color(0xffffffff)),

//                     enabledBorder: OutlineInputBorder(
//                       /*边角*/
//                       borderRadius: BorderRadius.all(
//                         Radius.circular(30), //边角为30
//                       ),
//                       borderSide: BorderSide(
//                         color: Colors.white, //边线颜色为黄色
//                         width: 2, //边线宽度为2
//                       ),
//                     ),
//                     focusedBorder: OutlineInputBorder(
//                         borderRadius: BorderRadius.all(
//                           Radius.circular(30), //边角为30
//                         ),
//                         borderSide: BorderSide(
//                           color: Colors.white, //边框颜色为绿色
//                           width: 2, //宽度为5
//                         )),
                                  border: InputBorder.none,
                                  // errorText: "errorText",

                                  hasFloatingPlaceholder: false,
                                ),
                              ))
                        ],
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 10.0,
                  ),
                  Container(
                    width: 25.0,
                    child: Column(
                      children: <Widget>[
                        Image.asset("images/search3.png"),
                        Text(
                          "分类",
                          style: TextStyle(fontSize: 12.0),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
            SizedBox(height: 20.0,),
            Expanded(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    width: MediaQuery.of(context).size.width * 0.3,
                    child: new Container(
                      child: ListView.builder(

                        physics:  AlwaysScrollableScrollPhysics(),
                        padding: const EdgeInsets.all(0.0),
                        itemCount: cates.length,
                        itemBuilder: (context, index) {
                          return new GestureDetector(
                            onTap: () {
//                              Fluttertoast.showToast(msg: "$index is clicked");
                              setState(() {
                                currentIndex = index;
                              });
                            },
                            child: Container(
                              alignment: Alignment.center,
                              height: 50.0,
                              width: MediaQuery.of(context).size.width * 0.3,
                              color: getbc(index),
                              child: Text(cates[index]),
                            ),

                          );
                        },
                      ),
                      color: const Color(0xFFededed),
                    ),
                  ),
                  Container(
                      width: MediaQuery.of(context).size.width * 0.7,
                      color: Color(0xffffffff),
                      child:
                      GridView.count(
                        crossAxisCount: 3,
                        children: c.map((s) {
                          return getGridviewItem(s);
                        }).toList(),
                        shrinkWrap: true,
                    //    childAspectRatio: MediaQuery.of(context).size.width* 0.7 / 3,
                       // physics: NeverScrollableScrollPhysics(),
                      ),
//                      ListView.builder(
//                          physics:AlwaysScrollableScrollPhysics(),
//
//                          itemCount: list[currentIndex].length,
//                          itemBuilder: (context, index) {
//                            return new ListTile(
//                              title: new Text(this.list[currentIndex][index]),
//                            );
//                          })
                  )
                ],
              ),
            )
          ],
        )
             );

  }

  Color getbc(int index) {
    if (index == currentIndex) {
      return new Color(0xFFFFFFFF);
    } else {
     // return new Color(0xFF98FB98);
      return new Color(0xFFededed);
    }
  }
  Widget getGridviewItem(String s) {
//    List<Widget> list=List();
//    for(int i=0;i<10;i++){
//      list.add(
//          Container(child: Image.asset("images/img.jpg",width: 30.0,height: 30.0)),)
//          ;
//    }
//
//    return list;

    return GestureDetector(
      child: Column(
        //crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Image.asset(
            "images/hotel.png",
            width: 30.0,
            height: 30.0,
          ),
          SizedBox(height: 5.0),
          Text(
            s+"${currentIndex}",
            style: TextStyle(color: Color(0xff000000), fontSize: 12.0),
            maxLines: 1,
          )
        ],
      ),
      onTap: () {
        print(s);
      },
    );
  }

}
